{% extends 'tend/account/common/base.html' %}
{% import "tend/macros/_flash.html" as flash_macros %}
{% block css %}
{{super()}}
<link href="{{url_for('admin.static',filename='ajax/libs/toastr/toastr.min.css')}}" rel="stylesheet" />
<link href="{{ url_for('main.static', filename='css/account.css')}}" rel="stylesheet">
<style>
    .avatar {
        width: 80px;
        padding: .25rem;
        background-color: #fff;
        border: 1px solid #dee2e6;
        border-radius: .25rem;
    }

    .select-avt {
        border: 1px solid rgb(202, 98, 14);
        box-shadow: 5px 5px 5px rgba(0.0.0, .5);
    }
</style>
{% endblock %}
{% block contents %}

<div class="container">
    <div class="row justify-content-md-center mt-5">
        <div class="col-md-8">
            {{flash_macros.flash_msg()}}
            <form method="POST">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <div class=" p-5 text-center">
                    <h2>当前邮箱：{{current_user.email}}</h2>
                </div>
                <div class="form-group row">
                    <label for="email" class="col-sm-2 col-form-label">新邮箱<span class="asteriskField">*</span>:</label>
                    <div class="col-sm-9">
                        <div class="input-group">
                            <input type="email" class="form-control" name="email" placeholder="email" aria-label="email"
                                aria-describedby="button-addon2" required value="">
                            <div class="input-group-append">
                                <button id="send-yzm-btn" class="btn btn-outline-info" type="button"
                                    id="button-addon2"><span id="countdown-container">发送邮件验证码</span></button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group row">
                    <label for="password" class="col-sm-2 col-form-label">验证码<span
                            class="asteriskField">*</span>:</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" name="yzm" required>
                    </div>
                    <div class="col-md-4"></div>
                </div>

                <div class="form-group row">
                    <div class="col-sm-10 text-center">
                        <button type="submit" class="btn btn-primary">修改</button>
                    </div>
                </div>
            </form>
        </div>

    </div>


</div>
{% endblock %}
{% block js %}
{{ super() }}
<script src="{{url_for('admin.static',filename='ajax/libs/toastr/toastr.min.js')}}"></script>
<script>
    $(function () {
        $('#send-yzm-btn').click(function () {
            let send_btn = $(this);
            let email = $.trim($('input[name="email"]').val())
            if (email == '') {
                toastr.error('写入正确邮箱地址');
                return
            }
            let formData = new FormData()
            formData.append('email', email)
            $.ajax({
                url: '{{url_for("main.yzm_mcode")}}',
                type: "post",
                data: $("form").serialize(),
                dataType: 'json',
                success: function (res) {
                    // console.log(res)
                    if (res.code == 0) {
                        toastr.success(res.msg);
                        send_btn.prop('disabled', true)
                        countdown(10); // 60秒倒计时
                    } else {
                        toastr.error(res.msg);
                    }
                },
                fail: function (res) {
                    toastr.error('网络错误');
                }
            })
        });
    });

    function countdown(seconds) {
        var remainingSeconds = seconds;
        var countdownInterval = setInterval(function () {
            if (remainingSeconds <= 0) {
                clearInterval(countdownInterval); // 清除计时器
                $('#send-yzm-btn').prop('disabled', false)
                $('#countdown-container').text('发送邮件验证码')
                // TODO: 倒计时结束之后的逻辑
            } else {
                // 更新剩余时间并显示出来
                remainingSeconds--;
                var countdownContainer = document.getElementById("countdown-container");
                countdownContainer.textContent = remainingSeconds + "秒后可重新发送";
            }
        }, 1000);
        
    }
</script>
{% endblock %}